<template>
    <el-autocomplete
            popper-class="auto-complete"
            v-model="keyword"
            :fetch-suggestions="querySearchAsync"
            placeholder="请输入内容"
            @select="handleSelect"
    >
        <template slot-scope="{ item }">
            <div class="title">{{ item.value }}</div>
            <span class="description">{{ item.description }}</span>
        </template>
    </el-autocomplete>
</template>

<script>
    export default {
        props: {careerId: Number},
        data() {
            return {keyword: null}
        },
        methods: {
            querySearchAsync(queryString, cb) {
                axios.get('skills/auto-complete', {
                    params: {
                        keyword: this.keyword,
                        career_id: this.careerId
                    }
                }).then((res) => {
                    cb(res.data.data);
                });

            }, handleSelect(item) {
                this.$emit('input', item);
            }
        }
    }
</script>

<style>

</style>